<div>

  <div class="heading">
    <div class="description">
      <h1>Register Applications</h1>
      <p>
        Register one or more applications by entering a <strong>Name</strong>,
        <strong>Type</strong> and <strong>App URI</strong> of the application Jar.
        You can also provide an optional <strong>metadata artifact URI</strong>.
        The App URI &amp; the Metadata Artifact URI are typically provided using the Maven coordinates of the Jar
        (e.g. <code>maven://io.spring.cloud:scdf-sample-app:jar:1.0.0.BUILD-SNAPSHOT</code>),
        but can be a local file or a docker image URI.
      </p>

    </div>
  </div>

  <!--
  <thead>
  <tr>
    <th style="width: 200px">Name</th>
    <th style="width: 200px">Type</th>
    <th>App URI &amp; optional Metadata URI</th>
    <th style="width: 90px">
      <span>
        Force
        <a #childPopover="bs-popover" [popover]="popTemplate" placement="bottom" [outsideClick]="true"
           title="Force">
          <span class="glyphicon glyphicon-question-sign"></span>
        </a>
      </span>
    </th>
    <th colspan="2" style="width: 150px">Actions</th>
  </tr>
  </thead>
  -->

  <form class="form-horizontal" [formGroup]="forms[i]" name="registerAppsForm{{i}}" (ngSubmit)="register()" novalidate
        id="registerAppsForm{{i}}"
        *ngFor="let form of forms; let i = index" (submit)="register()">

    <div class="row">
      <div class="col-lg-9">
        <div [class.has-error]="form.get('name').invalid && !isFormEmpty(form)" class="control-name{{i}} form-group">
          <label class="col-sm-5 control-label control-label-sm" for="name{{i}}">Name</label>
          <div class="col-sm-17">
            <input type="text" name="name{{i}}" id="name{{i}}" autofocus formControlName="name"
                   class="form-control  input-sm" placeholder="scdf-sample-app"/>
            <span class="help-block" *ngIf="form.get('name').invalid && !isFormEmpty(form)">Please provide a valid name
              for the app.</span>
          </div>
        </div>
        <div [class.has-error]="form.get('type').invalid && !isFormEmpty(form)" class="control-type{{i}} form-group">
          <label class="col-sm-5 control-label control-label-sm" for="type{{i}}">Type</label>
          <div class="col-sm-17">
            <select formControlName="type" name="type{{i}}" id="type{{i}}">
              <option value="">Please select a type...</option>
              <option *ngFor="let typeKey of applicationTypes.getKeys()" value="{{ typeKey }}">
                {{ applicationTypes[typeKey] | capitalize }}
              </option>
            </select>
            <span class="help-block" *ngIf="form.get('type').invalid && !isFormEmpty(form)">Please provide a valid
              type.</span>
          </div>
        </div>
      </div>
      <div class="col-lg-10">
        <div [class.has-error]="form.get('uri').invalid && !isFormEmpty(form)" class="control-uri{{i}} form-group">
          <label class="col-sm-5 control-label control-label-sm" for="uri{{i}}">URI</label>
          <div class="col-sm-17">
            <input type="text" name="uri{{i}}" id="uri{{i}}" formControlName="uri"
                   class="form-control input-sm" placeholder="maven://io.spring.cloud:scdf-sample-app:jar:1.0.0">
            <span class="help-block" *ngIf="form.get('uri').invalid && !isFormEmpty(form)">Please provide a valid URI
              pointing to the respective properties file.</span>
          </div>
        </div>
        <div [class.has-error]="form.get('metaDataUri').invalid && !isFormEmpty(form)" class="control-metaDataUri{{i}} form-group">
          <label class="col-sm-5 control-label control-label-sm" for="metaDataUri{{i}}">Metadata URI</label>
          <div class="col-sm-17">
            <input type="text" id="metaDataUri{{i}}" name="metaDataUri{{i}}" formControlName="metaDataUri"
                   class="form-control input-sm"
                   placeholder="maven://io.spring.cloud:scdf-sample-app:jar:metadata:1.0.0 [OPTIONAL]">
            <span class="help-block" *ngIf="form.get('metaDataUri').invalid && !isFormEmpty(form)">Please provide a
              valid URI pointing to the respective properties file.</span>
          </div>
        </div>
      </div>
      <div class="col-lg-3">
        <label class="checkbox-inline">
          <input type="checkbox" name="force{{i}}" id="force{{i}}" formControlName="force">
          Force
        </label>
      </div>
      <div class="col-lg-1">
        <button type="button" (click)="removeForm(i)" [disabled]="forms.length <= 1" class="btn btn-danger btn-line"
                title="Remove">
          <span class="glyphicon glyphicon-trash"></span>
        </button>
      </div>
    </div>
  </form>

  <div class="actions">
    <button name="add-form" (click)="newForm()" class="btn btn-primary" title="Add application">
      <span class="glyphicon glyphicon-plus"></span>
      New application
    </button>
  </div>

  <hr/>

  <div class="footer-actions row" style="margin-bottom: 2em;text-align: center">
    <button name="cancel" type="button" class="btn btn-default" (click)="cancel()">Cancel</button>
    <button name="register" [disabled]="!isValid()" (click)="register()" type="submit" class="btn btn-primary">
      Register the application(s)
    </button>
  </div>

</div>

<ng-template #popTemplate>By checking <strong>force</strong>, the applications will be imported and installed
  even if it already exists but only if not being used already.
</ng-template>
